<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/assets/css/layui.css">
    <link rel="stylesheet" href="/static/assets/css/view.css"/>
    <title>Title</title>
</head>
<body>
<body class="layui-view-body">
<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">用户ID</label>
        <div class="layui-input-inline">
            <input id="userId" type="text"  name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" disabled>
        </div>
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input id="userName" type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户密码</label>
        <div class="layui-input-inline">
            <input id="userPwd" type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">是否可用</label>
        <div class="layui-input-inline">
            <input id="flag" type="checkbox" name="yyy" lay-skin="switch" lay-text="启用|禁用" lay-filter="switchTest" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话号码</label>
        <div class="layui-input-inline">
            <input id="userTel" type="text" name="title" required  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-inline">
            <select name="role" lay-verify="required" id="role">
                <option value=""></option>
                <option value="1">超级管理员</option>
                <option value="2">普通管理员</option>
                <option value="3">体验用户</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="margin-left: 200px;margin-top: 20px">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">取消</button>
        </div>
    </div>
</form>
<script src="/static/assets/layui.all.js"></script>
<script src="/static/assets/jquery.min.js"></script>
<script src="/static/assets/limit.js"></script>
<script>
    $(function () {
         layui.use(['form','layer'], function(){
                var form = layui.form,
                layer = layui.layer;
                //通过名称得到url传参的值
                function getQueryString(name) {
                    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) {
                        return unescape(r[2]);
                    }
                    return null;
                }
                // 这样调用：
                var EuserId = getQueryString("userId");
                $.ajax({
                    url:"/user/selectById"
                    ,type:"post"
                    ,headers:{'Content-Type':'application/json;charset=utf8'}
                    ,data:JSON.stringify({userId:EuserId})
                    ,dataType:"json"
                    ,success:function (data) {
                        console.log("id查询用户成功")
                        console.log(data)
                        var user = data.data.user
                        $("#userId").val(user.userId)
                        $("#userName").val(user.userName)
                        $("#userTel").val(user.userTel)
                        $("#userPwd").val(user.userPwd)
                        if(user.roleId===1){
                            $("#role").find("option[value=1]").attr("selected",true)
                        }else if(user.roleId===2){
                            $("#role").find("option[value=2]").attr("selected",true)
                        }else if(user.roleId===3){
                            $("#role").find("option[value=3]").attr("selected",true)
                        }
                        if(!user.flag){
                            $("#flag").removeAttr('checked')
                            form.render();
                        }
                    }
                    ,error:function () {
                        console.log("请求失败")
                    }
                })
                //监听提交
                form.on('submit(formDemo)', function(data){
                    layer.msg(JSON.stringify(data.field));
                    $.ajax({
                        url: '/user/updateUser',
                        type: 'post',
                        data: data.field,
                        dataType: 'json',
                        success: function (res) {
                            console.log(res)
                            if(res.data.message===200){
                                layer.msg('修改成功')
                                toParent()
                            }else {
                                layer.msg('修改失败')
                            }
                        },
                        error: function (res) {

                        }
                    })
                    return false;
                });
            });
    })

</script>
<script>
    //Demo

</script>
</body>
</body>
</html>